<template>
  <div>
    <MkCard>
      <MkForm :col="4" formId="123">
        <MkInput label="单号" v-model="searchParam.billNo" />
        <MkSelect v-model="searchParam.notificationStatus" label="通知状态"
			    :options="['已通知', '未通知']"/>
        <el-form-item label="通知时间">
          <MkDateTime v-model="searchParam.startTime" />
        </el-form-item>
        <el-form-item label="至">
          <MkDateTime v-model="searchParam.endTime" />
        </el-form-item>
      </MkForm>
		</MkCard>
    <MkCard>
      <div>
        <div class="head">
          <el-button @click="search" type="primary">检索</el-button>
          <el-button @click="notice" type="primary">通知</el-button>
          <el-button @click="notice" type="primary">电话通知</el-button>
        </div>
        <MkTable :data="list" border @row-dblclick="rowDbClick">
          <el-table-column type="selection" width="55" />
          <MkColumn type="BillStatus" label="通知状态" prop="tongZhiZhuangTai" min-width="70px" /> 
          <MkColumn label="申请单号" prop="shengQingDanHao" min-width="130px" />
          <MkColumn label="住院号/患者Id" prop="huanZheId" min-width="100px" />
          <MkColumn label="患者姓名" prop="xingMing" min-width="80px" />
          <MkColumn label="申请科室" prop="keShi" min-width="110px" />
          <MkColumn label="病区" prop="bingQu" min-width="110px" />
          <MkColumn label="床号" prop="chuangHao" min-width="70px" />
          <el-table-column label="备血规格明细" min-width="250px">
            <template #default="{ row }">
              <div v-html="row.beiXueMingXi"></div>
            </template>
          </el-table-column>
          <MkColumn label="电话通知时间" prop="dianHuaTongZhiShiJian" min-width="130px" />
          <MkColumn label="电话通知反馈" prop="dianHuaTongZhiFanKui" min-width="130px" />
          <MkColumn label="通知时间" prop="tongZhiShiJian" min-width="130px" />
          <MkColumn label="通知人" prop="tongZhiRen" min-width="90px" />
        </MkTable>
        <div style="text-align: center; width: 100%;">
          <MkPagination v-model:page="searchParam.page"
            v-model:pageSize="searchParam.pageSize"
            :total="total"
            @query="search" />
        </div>
      </div>
    </MkCard> 
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: '取血通知'
})
// 单表List基本操作
import { ref,reactive } from 'vue';
interface Param {
  billNo?:string,
  notificationStatus?:number
  startTime?:string,
  endTime?:string,
  page:number,
  pageSize:number
}
const total = ref(0)
const searchParam = reactive<Param>({
  billNo:undefined,
  notificationStatus:undefined,
  startTime:undefined,
  endTime:undefined,
  page:1,
  pageSize:10
}) 
interface listDto {
  shengQingDanHao:string
  tongZhiZhuangTai?:string
  huanZheId?: string
  xingMing?: string
  keShi?: string
  bingQu?: string
  chuangHao?: string
  beiXueMingXi?: string
  dianHuaTongZhiShiJian?: string
  dianHuaTongZhiFanKui?: string
  tongZhiShiJian?:string,
  tongZhiRen?:number
}
const list = reactive<listDto[]>([
  {
    shengQingDanHao:'单号1',
    tongZhiZhuangTai: '已通知',
    huanZheId: '0001010101',
    xingMing: '一零一',
    keShi: '血液内科',
    bingQu: '血液内科',
    chuangHao: '23',
    beiXueMingXi: '悬浮红细胞2u -- 1袋<br />洗涤红细胞2u -- 1袋',
    dianHuaTongZhiShiJian: '',
    dianHuaTongZhiFanKui: '',
    tongZhiShiJian:'2025-03-29',
    tongZhiRen:2
  },
  {
    shengQingDanHao:'单号2',
    tongZhiZhuangTai: '未通知',
    huanZheId: '0002020111',
    xingMing: '二',
    keShi: '血液内科',
    bingQu: '血液内科',
    chuangHao: '21',
    beiXueMingXi: '新鲜病毒血浆100ml -- 2袋',
    dianHuaTongZhiShiJian: '',
    dianHuaTongZhiFanKui: '',
    tongZhiShiJian:'2025-03-29',
    tongZhiRen:3
  },
])

const search = () =>{

}
const notice = () =>{

}

const rowDbClick = () =>{

}
</script>

<style lang='scss' scoped>
/* 在这里添加你的样式 */
.head{
  padding: 0px 5px 5px 5px;
}
</style>